{% extends 'zgh0381/base.html' %}

{% block title %}
     Swift网盘管理系统|swift容器列表页
{% endblock title %}

{% block main %}
        {% if messages %}
            {% for msg in messages %}
            <script>
                alert('{{ msg.message }}');
            </script>
            {% endfor %}
        {% endif %}
    <h1 class="page-header">Swift容器管理页面</h1>
    <!-- 面板开始 -->
    <div class="panel panel-primary">
        <div class="panel-heading">Swift容器列表 <i class=" glyphicon glyphicon-trash pull-right"></i></div>
        <div class="panel-body">
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">搜索</button>
                                </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-md-4 -->
                <div class="col-md-3 pull-right">
                    <a href="{% url 'zhanggh0381:list_containers' %}" class="btn btn-success pull-right"><i
                            class="fa fa-plus fa-fw"></i>新增容器</a>
                    <button class="btn btn-success pull-right" data-toggle="modal" data-target="#myModal">新增
                    </button>
                </div>

            </div><!-- /.row -->

            <table class="table table-bordered" id="tab">
                {% csrf_token %}
                <thead>
                <tr>
                    <th>容器名</th>
                    <th>对象数</th>
                    <th>对象所占大小</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody >
                    <tr>
                        <td>{{ request.session.container_detail.Content-Length }}</td>
                        <td><button class="btn btn-danger delete_btn"  ><i
                                class="fa fa-trash-o fa-fw" ></i>删除</button>&nbsp
                            <a class="btn btn-info fa-eye_btn"   >
                                <i class="glyphicon glyphicon-eye-open" ></i>&nbsp;预览</a></td>
                    </tr>
                </tbody>
                {% csrf_token %}
            </table>
        </div>
    </div>
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li><a href="#" class="active">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    <script src="/static/libs/jquery-1.12.4/jquery.min.js"></script>
    <script type="text/javascript" >
        /* 删除 */
        //为单个删除绑定单击事件
		$(document).on("click",".delete_btn",function(){
			//1、弹出是否确认删除对话框
			var containerName = $(this).parents("tr").find("td:eq(0)").text();
			if(confirm("确认删除容器【"+containerName+"】吗？")){
                $(this).parent("td").parent("tr").remove();
				//确认，发送ajax请求删除即可
                $.ajax({
					url:"/zgh0381/delete_containers/",
					type:"POST",
                    data:{"containername": containerName},
                     beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
					success:function(result){

						//显示处理成功
                          if(result.res == 1){
                              alert("删除成功!");

                    }

					}
				});


            }
		});

    </script>

{% endblock main %}

{% block container_list %}
    active
{% endblock container_list %}